<template>
    <div>
      <div style="color: #97a8be; font-size: 12px; text-align: center">
        点击图片进行下载
      </div>
      <div @click="downloadImg()" style="text-align: center" id="qrDiv_QrCode">
        <vue-qr :text="text" :margin="0" :size="400" class="d-block mx-auto" />
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  import { scrollTo } from "@/utils/scroll-to";
  import vueQr from "vue-qr";
  import html2canvas from "html2canvas";
  
  export default {
    name: "couponQrCode",
    props: {
      page: {
        type: Number,
        default: 1,
      },
      limit: {
        type: Number,
        default: 10,
      },
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 30, 50];
        },
      },
      layout: {
        type: String,
        default: "total, sizes, prev, pager, next, jumper",
      },
      background: {
        type: Boolean,
        default: true,
      },
      autoScroll: {
        type: Boolean,
        default: true,
      },
      hidden: {
        type: Boolean,
        default: false,
      },
      pagerCount: {
        type: Number,
        default: 7,
      },
      text: {
        type: String,
        required: true,
      },
      name:{
        type: String,
        required: true,
      }
    },
    components: {
      vueQr,
    },
    computed: {
      currentPage: {
        get() {
          return this.page;
        },
        set(val) {
          this.$emit("update:page", val);
        },
      },
      pageSize: {
        get() {
          return this.limit;
        },
        set(val) {
          this.$emit("update:limit", val);
        },
      },
    },
    methods: {
      downloadImg() {
        try {
          window.pageYoffset = 0;
          document.documentElement.scrollTop = 0;
          document.body.scrollTop = 0;
  
          html2canvas(document.getElementById("qrDiv_QrCode"), {
            allowTaint: false,
          }).then((canvas) => {
            const a = document.createElement("a");
            const event = new MouseEvent("click");
            a.download = this.name;
            a.href = canvas.toDataURL();
            a.dispatchEvent(event);
            this.$emit("downloadImg")
          });
        } catch (error) {
          this.msgError("导出二维码失败，请刷新重试~")
        }
      },
      exportQr(text) {
        this.text = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
        this.exportQrDialog = true;
      },
      handleSizeChange(val) {
        this.$emit("pagination", { page: this.currentPage, limit: val });
        if (this.autoScroll) {
          scrollTo(0, 800);
        }
      },
      handleCurrentChange(val) {
        this.$emit("pagination", { page: val, limit: this.pageSize });
        if (this.autoScroll) {
          scrollTo(0, 800);
        }
      },
    },
  };
  </script>
  
  <style scoped>
  </style>
  